import React, { Component } from 'react';
import './pay_login.css'
import img from '../../images/1.svg'

export default class Pay_login extends Component {
    goOrderM = () => {
        this.props.history.push('/order')
    }
    render() {
        const bgGround = {
            height: '32px',
            width:'100px',
            margin: '0 auto 20px',
            backgroundImage: 'url(' +img + ')'
        };
        return (
            <div className="corral">
                <div className="content_container">
                    <header>
                        <div style = {bgGround}></div>
                    </header>
                    <div className="headerText">用PayPal付款</div>
                    <div className="subHeaderText">请先输入您的邮箱地址或手机号码。</div>
                    <form action="">
                        <div className="splitEmail">
                            <div className="splitPhoneSection">
                                <div className="textInput">
                                    <div className="fieldWrapper">
                                        <input type="email" className="hasHelp" placeholder="电子邮箱或手机号码" />
                                    </div>
                                </div>
                                <div className="recoverOption">忘记邮箱地址了？</div>
                            </div>
                        </div>
                        <div className="actions">
                            <button type="submit" className="actionContinue">下一步</button>
                        </div>
                    </form>
                    <div className="signupContainer">
                        <div className="loginSignUpSeparator">
                            <span className="textInSeparator">或</span>
                        </div>
                        <button type="submit" className="secondary">使用信用卡或借记卡付款</button>
                    </div>
                    <div className="intentFooter">
                        <div className="cancelUrl">
                            <a onClick={this.goOrderM.bind(this)}>取消并返回到Ad storm marketing</a>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}